
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        font-family:Arial;
        background:#fff url('/appliweb/public/bubble/images/bg.png') no-repeat top left;
    }
    .title{
        width:548px;
        height:119px;
        position:absolute;
        top:400px;
        left:150px;
        background:transparent url(title.png) no-repeat top left;
    }
    a.back{
        background:transparent url(back.png) no-repeat top left;
        position:fixed;
        width:150px;
        height:27px;
        outline:none;
        bottom:0px;
        left:0px;
    }
    #content{
        margin:0 auto;
    }


</style>

<div>
    <a class="back" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navindex-with-jquery"></a>
    <div class="title"></div>

    <div class="navindex" id="nav">
        <div class="item home">
            <img src="/appliweb/public/bubble/images/bg_user.png" alt="" width="199" height="199" class="circle"/>
            <a href="#" class="icon"></a>
            <h2>Home</h2>
            <ul>
                <li>
                    <a href="
                    <?php echo $this->url(array('module' => 'default', 'controller' => 'Index', 'action' => 'index')) ?> 
                       ">
                        Home
                    </a>
                </li>
                <li>
                    <a href="
                    <?php echo $this->url(array('module' => 'default', 'controller' => 'Index', 'action' => 'contact')) ?> 
                       ">
                        Contact
                    </a>
                </li>
            </ul>
        </div>
        <div class="item event">
            <img src="/appliweb/public/bubble/images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
            <a href="#" class="icon"></a>
            <h2>Nouveautés</h2>
            <ul>
                <li>
                    <a href="
                    <?php echo $this->url(array('module' => 'default', 'controller' => 'Events', 'action' => 'index')) ?> 
                       ">
                        Liste des événements
                    </a>
            </ul>
        </div>
        <div class="item shop">
            <img src="/appliweb/public/images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
            <a href="#" class="icon"></a>
            <h2>Magasin</h2>
            <ul>
                <li>
                    <a href="
                    <?php echo $this->url(array('module' => 'default', 'controller' => 'Article', 'action' => 'index')) ?> 
                       ">
                        Catalogue
                    </a>
                </li>
            </ul>
        </div>
        <div class="item activity">
            <img src="/appliweb/public/images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
            <a href="#" class="icon"></a>
            <h2>Activités</h2>
            <ul>
                <li>
                    <a href="
                    <?php echo $this->url(array('module' => 'default', 'controller' => 'Activites', 'action' => 'index')) ?> 
                       ">
                        Nos Activités
                    </a>
                </li>
            </ul>
        </div>
        <div class="item user">
            <img src="/appliweb/public/images/bg_user.png" alt="" width="199" height="199" class="circle"/>
            <a href="#" class="icon"></a>
            <h2>Membres</h2>
            <ul>
                <li>
                    <a href="
                    <?php echo $this->url(array('module' => 'admin', 'controller' => 'Index', 'action' => 'index')) ?> 
                       ">
                        Accès Membre
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
    $(document).ready(function(){
        $('.navigation').hide();
    
        $('#footer').hide();
        $('#view-content').show();
        $('#content').css( 'box-shadow', '0px 0px 0px #AAAAAA' ) ;
    });
    $('#nav > div').hover(
    function () {
        var $this = $(this);
        $this.find('img').stop().animate({
            'width'     :'199px',
            'height'    :'199px',
            'top'       :'-25px',
            'left'      :'-25px',
            'opacity'   :'1.0'
        },500,'easeOutBack',function(){
            $(this).parent().find('ul').fadeIn(700);
        });

        $this.find('a:first,h2').addClass('active');
    },
    function () {
        var $this = $(this);
        $this.find('ul').fadeOut(500);
        $this.find('img').stop().animate({
            'width'     :'52px',
            'height'    :'52px',
            'top'       :'0px',
            'left'      :'0px',
            'opacity'   :'0.1'
        },5000,'easeOutBack');

        $this.find('a:first,h2').removeClass('active');
    }
);
</script>